<!--
 * @Description: 价格汇总
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-06-30 20:24:01
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/room/summary/index.vue
-->
<template>
  <el-collapse-item title="价格汇总" name="6" disabled>
    <template slot="title">
      <i
        class="el-icon-circle-plus-outline mr10 expand"
        @click="handleExpand"
      ></i>
      价格汇总<span style="color: red"
        >({{
          this.form.list.length ? this.form.list[0].totalPrice : "0"
        }})</span
      >
      <el-button
        type="primary"
        plain
        size="mini"
        icon="el-icon-refresh"
        class="ml10"
        @click.stop="getMethod()"
      >
        刷新
      </el-button>
    </template>
    <el-form ref="form" :model="form" :rules="rules" inline size="mini">
      <el-table
        v-loading="loading"
        :data="form.list"
        :max-height="500"
        size="mini"
        border
      >
        <el-table-column
          label="商品价格"
          align="center"
          prop="commodityPrice"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          label="邮费"
          align="center"
          prop="postage"
          min-width="120"
        >
        </el-table-column>

        <el-table-column
          label="变更价格"
          align="center"
          prop="changeCost"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          label="总价调整"
          align="center"
          prop="totalPriceAdjustment"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <el-form-item prop="totalPriceAdjustment">
              <el-input-number
                style="width: 100%"
                v-model="row.totalPriceAdjustment"
                placeholder="请输入"
                clearable
                :controls="false"
                :precision="2"
              ></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="总价"
          align="center"
          prop="totalPrice"
          min-width="120"
        >
          <template slot-scope="{ row }">
            <span style="font-size: 20px">{{ row.totalPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="80"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleSave(scope.row)"
              v-hasPermi="['md:order:edit']"
              >保存</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </el-collapse-item>
</template>

<script>
import {
  listSummary,
  getSummary,
  delSummary,
  addSummary,
  updateSummary,
} from "@/api/asc/summary";

const FORM = {
  orderPriceSummaryId: null,
  orderId: null,
  commodityPrice: null,
  postage: null,
  changeCost: null,
  totalPriceAdjustment: null,
  totalPrice: null,
};
export default {
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      activeNames: "6",
      loading: false,

      form: {
        list: [{ ...FORM }],
      },
      rules: {},
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.getMethod();
    // this.getMethodList();
    // this.getMachiningList();
  },
  methods: {
    getMethod() {
      listSummary({
        pageNum: 1,
        pageSize: 1,
        orderId: this.data?.proOrderId,
      }).then(({ rows }) => {
        this.$emit("active", "6");
        this.form.list = rows || [
          {
            ...FORM,
            orderId: this.data?.proOrderId,
          },
        ];
      });
    },
    // 保存
    handleSave(row = this.form.list[0]) {
      const params = {
        ...row,
        totalPriceAdjustment: row.totalPriceAdjustment || 0,
      };
      this.loading = true;
      updateSummary(params)
        .then((response) => {
          this.$modal.msgSuccess("保存成功");
          this.getMethod();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleExpand() {
      this.$emit("active", "6", "1");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .cell {
    padding-left: 4px;
    padding-right: 4px;
  }
}
.expand {
  cursor: pointer;
}

::v-deep {
  .el-table--border,
  .el-table--group {
    border: 1px solid rgb(150, 150, 150) !important;
  }
  /**
改变表格内竖线颜色
 */
  .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid rgb(150, 150, 150) !important;
  }
  /**
改变表格内行线颜色
 */
  .el-table td,
  .el-table th.is-leaf,
  .el-table__cell {
    border-bottom: 1px solid rgb(150, 150, 150) !important;
  }
}
</style>
